{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>
      {% block title %}

      {% endblock %}
  </title>
  <meta name="description" content="Katen - 极简博客与杂志HTML主题">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="shortcut icon" type="image/x-icon" href="images/favicon.png">
  <!-- STYLES -->
  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}" type="text/css" media="all">
  <link rel="stylesheet" href="{% static 'css/all.min.css' %}" type="text/css" media="all">
  <link rel="stylesheet" href="{% static 'css/slick.css' %}" type="text/css" media="all">
  <link rel="stylesheet" href="{% static 'css/simple-line-icons.css' %}" type="text/css" media="all">
  <link rel="stylesheet" href="{% static 'css/style.css' %}" type="text/css" media="all">
  <!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>

<body>
  <!-- preloader -->
  <div id="preloader">
    <div class="book">
      <div class="inner">
        <div class="left"></div>
        <div class="middle"></div>
        <div class="right"></div>
      </div>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <!-- site wrapper -->
  <div class="site-wrapper">
    <div class="main-overlay"></div>
    <!-- header -->
    <header class="header-default">
      <nav class="navbar navbar-expand-lg">
        <div class="container-xl">
          <!-- site logo --><a class="navbar-brand" href="/">
            <img src="{% static 'images/logo.svg' %}" alt="logo" />
          </a>
          <div class="collapse navbar-collapse"><!-- menus -->
            <ul class="navbar-nav mr-auto">
              <li class="nav-item dropdown {{ shouye_active }}"><a class="nav-link" href="/">首页</a></li>
              <li class="nav-item {{ life_active }}"><a class="nav-link" href="/life/list/?btype=1">生活方式</a></li>
              <li class="nav-item {{ ins_active }}"><a class="nav-link" href="/inspiration/list/?btype=2">灵感</a></li>
              <li class="nav-item {{ fas_active }}"><a class="nav-link" href="/fashion/list/?btype=3">时尚</a></li>
              <li class="nav-item {{ com_active }}"><a class="nav-link" href="/comment/list/?btype=4">文化</a></li>
              <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#">关于我们</a>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="/about/about/">关于</a></li>
                  <li><a class="dropdown-item" href="/about/contact/">联系</a></li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- header right section -->
          <div class="header-right">
            <div class="header-buttons d-flex align-items-center">
              <div class="search-container active"><!-- 默认展开 -->
                <form class="search-form">
                  <input type="text" name="search_word" class="form-control" placeholder="搜索..." value="{{ request.GET.search_word|default:'' }}" />
                  <button type="button" class="search-btn">
                      <i class="icon-magnifier"></i>
                  </button>
                </form>
              </div>
              <div class="position-relative ms-2">
                <button class="burger-menu icon-button" onclick="toggleUserMenu(event)"><span
                    class="burger-icon"></span></button>
                <!-- 用户菜单 -->
                <div id="userMenu" class="user-menu" style="display: none; position: absolute; right: 0; top: 100%; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.2); z-index: 1000; min-width: 200px;">
                    {% if request.session.user_info %}
                        <div class="user-info p-3 border-bottom">
                            <div class="d-flex align-items-center">
                              <img src="/media/{{ user_head }}" class="rounded-circle me-2" style="width: 40px; height: 40px;" alt="用户头像">
                              <div>
                                <h6 class="mb-0">{{ request.session.user_info.username }}</h6>
                                <small class="text-muted">{{ request.session.user_info.email }}</small>
                              </div>
                            </div>
                        </div>
                          <ul class="list-unstyled mb-0">
                            <li>
                                <a href="/user/person/" class="dropdown-item py-2 px-3"><i class="icon-user me-2"></i>个人中心</a>
                            </li>
                              <li>
                                <a href="/life/publish/" class="dropdown-item py-2 px-3"><i class="icon-credit-card me-2"></i>发表博客</a>
                            </li>
                              <li>
                                <a href="/user/coll/" class="dropdown-item py-2 px-3"><i class="icon-compass me-2"></i>我的收藏</a>
                            </li>
                              <li>
                                <a href="/user/view/history/" class="dropdown-item py-2 px-3"><i class="icon-clock me-2"></i>浏览历史</a>
                            </li>
                            <li>
                                <a href="/user/logout/" class="dropdown-item py-2 px-3 text-danger">
                                <i class="icon-logout me-2"></i>退出</a>
                            </li>
                          </ul>
                    {% else %}
                        <ul class="list-unstyled mb-0">
                            <li>
                                <a href="/user/login/" class="dropdown-item py-2 px-3"><i class="icon-user me-2"></i>登入</a>
                            </li>
                            <li>
                                <a href="/user/register/" class="dropdown-item py-2 px-3"><i class="icon-user me-2"></i>注册</a>
                            </li>
                        </ul>
                    {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </header>


    <!-- content -->
  {% block content %}

  {% endblock %}

    <!-- footer -->
    <footer>
      <div class="container-xl">
        <div class="footer-inner">
          <div class="row d-flex align-items-center gy-4"><!-- copyright text -->
            <div class="col-md-4"><span class="copyright">© 2021 Katen. Template by ThemeGer.</span></div>
            <!-- social icons -->
            <div class="col-md-4 text-center">
              <ul class="social-icons list-unstyled list-inline mb-0">
                <li class="list-inline-item"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="fab fa-instagram"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="fab fa-pinterest"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="fab fa-medium"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="fab fa-youtube"></i></a></li>
              </ul>
            </div>
            <!-- go to top button -->
            <div class="col-md-4"><a href="#" id="return-to-top" class="float-md-end"><i
                  class="icon-arrow-up"></i>返回顶部</a></div>
          </div>
        </div>
      </div>
    </footer>
  </div>

  <!-- JAVA SCRIPTS -->
  <script src="{% static 'js/jquery.min.js' %}"></script>
{#  <script src="/static/js/jquery.min.js?v=3.6.0"></script>#}
{#  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>#}
  <script src="{% static 'js/popper.min.js' %}"></script>
  <script src="{% static 'js/bootstrap.min.js' %}"></script>
  <script src="{% static 'js/slick.min.js' %}"></script>
  <script src="{% static 'js/jquery.sticky-sidebar.min.js' %}"></script>
  <script src="{% static 'js/custom.js' %}"></script>

  <script>
    function toggleUserMenu(event) {
      event.stopPropagation();
      const menu = document.getElementById('userMenu');
      menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
    }
    document.addEventListener('click', function (event) {
      const menu = document.getElementById('userMenu');
      const burgerButton = document.querySelector('.burger-menu');
      if (!menu.contains(event.target) && !burgerButton.contains(event.target)) {
        menu.style.display = 'none';
      }
    });
  </script>
{% block js %}

{% endblock %}


{% block css %}

{% endblock %}

<style>
    .user-menu {
      border-radius: 4px;
      margin-top: 10px;
    }

    .user-menu .dropdown-item,
    .user-menu .dropdown-item:hover,
    .user-menu .dropdown-item:active,
    .user-menu .dropdown-item:focus {
      box-sizing: border-box;
      width: 100%;
      padding: 8px 16px;
      border: none;
      font-weight: 400;
      outline: none;
      margin: 0;
      display: flex;
      align-items: center;
      transition: background-color 0.2s, color 0.2s;
    }

    .user-menu .dropdown-item:hover {
      background-color: #f8f9fa;
      color: #fe5e74;
    }

    .user-menu .text-danger,
    .user-menu .text-danger:hover,
    .user-menu .text-danger:active,
    .user-menu .text-danger:focus {
      color: #dc3545 !important;
      background: none;
      box-sizing: border-box;
      width: 100%;
      padding: 8px 16px;
      border: none;
      font-weight: 400;
      outline: none;
      margin: 0;
      display: flex;
      align-items: center;
    }

    .user-menu .text-danger:hover {
      background-color: #dc3545 !important;
      color: #fff !important;
    }

    .burger-menu {
      cursor: pointer;
    }

    .search-container {
      display: flex;
      align-items: center;
      position: relative;
    }

    .search-toggle {
      color: #fe5e74;
      background: none;
      border: none;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      transition: background 0.2s;
      flex-shrink: 0;
    }

    .search-toggle:hover {
      background: rgba(254, 94, 116, 0.08);
      color: #fe5e74;
    }

    .search-form {
      display: flex;
      align-items: center;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
      padding: 0 8px 0 0;
      margin-left: 0;
      height: 40px;
      width: 0;
      overflow: hidden;
      transition: width 0.3s cubic-bezier(.4, 2, .6, 1);
      position: relative;
    }

    .search-container:not(.active) .search-form {
      width: 0;
      padding: 0;
      border: none;
    }

    .search-container.active .search-toggle {
      display: none;
    }

    .search-container.active .search-form {
      width: 260px;
      padding: 0 8px 0 0;
    }

    .search-form .form-control {
      border: none;
      outline: none;
      box-shadow: none;
      border-radius: 20px;
      padding: 8px 40px 8px 16px;
      font-size: 15px;
      background: transparent;
      flex: 1;
    }

    .search-form .search-btn {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #fe5e74;
      font-size: 18px;
      padding: 0;
      cursor: pointer;
    }

    .search-form .search-btn:hover {
      color: #fe5e74;
    }

    .icon-button {
      cursor: pointer;
      padding: 8px;
      border: none;
      background: none;
      color: #fe5e74;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transition: all 0.3s ease;
    }

    .icon-button:hover {
      background-color: rgba(254, 94, 116, 0.08);
      color: #fe5e74;
    }

    .burger-icon {
      display: block;
      width: 20px;
      height: 2px;
      background-color: currentColor;
      position: relative;
      transition: all 0.3s ease;
    }

    .burger-icon:before,
    .burger-icon:after {
      content: '';
      position: absolute;
      width: 20px;
      height: 2px;
      background-color: currentColor;
      transition: all 0.3s ease;
    }

    .burger-icon:before {
      top: -6px;
    }

    .burger-icon:after {
      bottom: -6px;
    }

    .icon-button:hover .burger-icon:before {
      transform: translateY(2px);
    }

    .icon-button:hover .burger-icon:after {
      transform: translateY(-2px);
    }

    .search-container .search.icon-button {
      display: flex;
    }

    .search-container.active .search.icon-button {
      display: none;
    }
  </style>